﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../plugins/fontawesome/css/font-awesome.css" rel="stylesheet" />
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../scripts/footer.js"></script>
    <script src="../src/js/rayui.js" use="page,layer"></script>
    <script src="../scripts/common.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }

        .demo {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h3 class="spliter-middle"><label>全部功能</label></h3>
    <div class="demo" id="div1"></div>
    <div class="demo" id="div1-1"></div>

    <h3 class="spliter-middle"><label>自定义颜色</label></h3>
    <div class="demo" id="div2"></div>
    <div class="demo" id="div2-1"></div>
    <div class="demo" id="div2-2"></div>
    <div class="demo" id="div2-3"></div>


    <h3 class="spliter-middle"><label>修改布局</label></h3>
    <div class="demo" id="div3"></div>
    <div class="demo" id="div3-1"></div>
    <div class="demo" id="div3-2"></div>
    <div class="demo" id="div3-3"></div>

    <h3 class="spliter-middle"><label>自定义首页、上一页、下一页、尾页</label></h3>
    <div class="demo" id="div4"></div>

    <h3 class="spliter-middle"><label>事件操作</label></h3>
    <div class="demo" id="div5"></div>
    <a class="rayui-btn btn-primary" id="btn5">跳转到第5页</a>
    <a class="rayui-btn btn-success" id="btn51">跳转到第2页并设置总条数为1000</a>

    <br />
    <br />
    <br />

    <h3 class="spliter-middle"><label>options参数</label></h3>
<table class="raytable full-width">
<thead>
<tr>
    <th style="min-width:150px">参数</th>
    <th style="min-width:100px">类型</th>
    <th>说明</th>
    <th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
    <td>
        align
    </td>
    <td>string</td>
    <td>对其方式，可选left|right|center</td>
    <td>
        left
    </td>
</tr>
<tr>
    <td>
        groups
    </td>
    <td>number</td>
    <td>连续页码按钮数量，建议设置为单数</td>
    <td>
        5
    </td>
</tr>
<tr>
    <td>
        limit
    </td>
    <td>number</td>
    <td>每页显示的条数，如果设置的limit不在limits里面，会自动加到limits</td>
    <td>10</td>
</tr>
<tr>
    <td>
        limits
    </td>
    <td>array</td>
    <td>分页条数选项</td>
    <td>[10, 20, 30, 40, 50, 60, 70, 80, 90]</td>
</tr>
<tr>
    <td>
        curr
    </td>
    <td>number</td>
    <td>当前页</td>
    <td>
        1
    </td>
</tr>

<tr>
    <td>
        count
    </td>
    <td>number</td>
    <td>总条数</td>
    <td>
        0
    </td>
</tr>
<tr>
    <td>
        color
    </td>
    <td>string</td>
    <td>选中的颜色值</td>
    <td>
        null
    </td>
</tr>
<tr>
    <td>
        btnGroup
    </td>
    <td>bool</td>
    <td>按钮是否成组</td>
    <td>
        true
    </td>
</tr>
<tr>
    <td>
        layout
    </td>
    <td>array</td>
    <td>
        自定义布局，可选<br />
        "count": 总条数<br />
        "limit": 每页条数<br />
        "first": 首页<br />
        "pre": 上一页<br />
        "page": 页码<br />
        "next": 下一页<br />
        "last": 最后一页<br />
        "refresh": 刷新<br />
        "jump": 跳转<br />
    </td>
    <td>
        ["count","limit","first","pre","page","next","last","refresh","jump"]
    </td>
</tr>
<tr>
    <td>
        groups
    </td>
    <td>number</td>
    <td>连续页码按钮数量，建议设置为单数</td>
    <td>
        5
    </td>
</tr>

<tr>
    <td>
        btnFirstHtml
    </td>
    <td>string</td>
    <td>首页</td>
    <td>
        &lt;i class="ra ra-first">&lt;/i>
    </td>
</tr>
<tr>
    <td>
        btnPreHtml
    </td>
    <td>string</td>
    <td>上一页</td>
    <td>
        &lt;i class="ra ra-single-angle-left">&lt;/i>
    </td>
</tr>
<tr>
    <td>
        btnNextHtml
    </td>
    <td>string</td>
    <td>下一页</td>
    <td>
        &lt;i class="ra ra-single-angle-right">&lt;/i>
    </td>
</tr>
<tr>
    <td>
        btnLastHtml
    </td>
    <td>string</td>
    <td>尾页</td>
    <td>
        &lt;i class="ra ra-last">&lt;/i>
    </td>
</tr>
<tr>
    <td>
        btnRefreshHtml
    </td>
    <td>string</td>
    <td>刷新</td>
    <td>
        &lt;i class="ra ra-refresh-s">&lt;/i>
    </td>
</tr>
<tr>
    <td>
        limitText
    </td>
    <td>string</td>
    <td>select选择</td>
    <td>
        条/页
    </td>
</tr>
<tr>
    <td>
        countLeftText
    </td>
    <td>string</td>
    <td>总条数左侧</td>
    <td>
        共&amp;nbsp;
    </td>
</tr>
<tr>
    <td>
        countRightText
    </td>
    <td>string</td>
    <td>总条数右侧</td>
    <td>
        &amp;nbsp;条
    </td>
</tr>
<tr>
    <td>
        jumpLeftText
    </td>
    <td>string</td>
    <td>输入框左侧</td>
    <td>
        到第
    </td>
</tr>
<tr>
    <td>
        jumpRightText
    </td>
    <td>string</td>
    <td>输入框右侧</td>
    <td>
        页
    </td>
</tr>
<tr>
    <td>
        jumpBtnText
    </td>
    <td>string</td>
    <td>按钮</td>
    <td>
        确定
    </td>
</tr>
</tbody>
</table>

    
<h3 class="spliter-middle"><label>属性函数</label></h3>
<table class="raytable full-width">
<thead>
    <tr>
        <th style="min-width:150px">函数</th>
        <th>参数</th>
        <th>说明</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            onPageJump
        </td>
        <td>old,to</td>
        <td>old上一页；to新页码</td>
    </tr>

    <tr>
        <td>
            onPageLimitChanged
        </td>
        <td>old,to</td>
        <td>old旧每页条数；to新每页条数</td>
    </tr>

</tbody>
</table>

    
<h3 class="spliter-middle"><label>handle方法</label></h3>
<table class="raytable full-width">
    <thead>
    <tr>
        <th style="min-width:100px">函数</th>
        <th style="min-width:150px">参数</th>
        <th>说明</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                on
            </td>
            <td>event, callback</td>
            <td>event：字符串，可选jump（同onPageJump），limitChanged（同onPageLimitChanged）<br />callback：函数</td>
        </tr>

        <tr>
            <td>
                jump
            </td>
            <td>to</td>
            <td>to跳转新页码</td>
        </tr>

        <tr>
            <td>
                modify
            </td>
            <td>to,count</td>
            <td>to：跳转新页码<br/>count：总条数</td>
        </tr>

    </tbody>
</table>
    
<pre class="rayui-code">
//渲染
var handle = page.render({
    elem: "#div5",
    count: 500,
    color: "#55a255",
    onPageJump: function (pre, to) {
        layer.alert("将要从第 " + pre + " 页到第 " + to + " 页", { timeout: 1000 });
    },
    onPageLimitChanged: function (pre, to) {
        layer.alert("每页条数将要从 " + pre + " 条改为 " + to + " 条", { timeout: 1000 });
    }
});

//跳转第5页
handle.jump(5);

//跳转到第2页并设置总条数为1000
handle.modify(2, 1000);

</pre>

    
<script>
        rayui.ready(function () {

            var page = rayui.page,
                layer = rayui.layer;

            //全部功能
            (function () {

                page.render({
                    elem: "#div1",
                    count: 1000
                });

                page.render({
                    elem: "#div1-1",
                    count: 1000,
                    btnGroup: false
                });

            })();

            //自定义颜色
            (function () {

                page.render({
                    elem: "#div2",
                    count: 1000,
                    curr: 3,
                    color: "#308ddc"
                });

                page.render({
                    elem: "#div2-1",
                    count: 1000,
                    curr: 3,
                    color: "#55a255"
                });

                page.render({
                    elem: "#div2-2",
                    count: 1000,
                    curr: 3,
                    color: "#e09325"
                });

                page.render({
                    elem: "#div2-3",
                    count: 1000,
                    curr: 3,
                    color: "#d9534f"
                });

            })();

            //修改布局
            (function () {

                page.render({
                    elem: "#div3",
                    count: 500,
                    layout: [
                        "limit",//每页条数
                        "count",//总条数
                        "first",//首页
                        "pre",//上一页
                        "page",//页码
                        "next",//下一页
                        "last",//最后一页
                        "refresh",//刷新
                        "jump"//跳转
                    ]
                });

                page.render({
                    elem: "#div3-1",
                    count: 500,
                    layout: [
                        "limit",//每页条数
                        "count",//总条数
                        "pre",//上一页
                        "page",//页码
                        "next",//下一页
                        "refresh",//刷新
                        "jump"//跳转
                    ]
                });

                page.render({
                    elem: "#div3-2",
                    count: 500,
                    layout: [
                        "limit",//每页条数
                        "count",//总条数
                        "pre",//上一页
                        "page",//页码
                        "next",//下一页
                        "jump"//跳转
                    ]
                });

                page.render({
                    elem: "#div3-3",
                    count: 500,
                    layout: [
                        "limit",//每页条数
                        "count",//总条数
                        "pre",//上一页
                        "page",//页码
                        "next",//下一页
                    ]
                });


            })();

            //自定义首页、上一页、下一页、尾页
            (function () {

                page.render({
                    elem: "#div4",
                    count: 500,
                    btnFirstHtml: '首页',
                    btnPreHtml: '<--',
                    btnNextHtml: '-->',
                    btnLastHtml: '最后一页',
                    btnRefreshHtml: '刷新'
                });
            })();


            //事件监听
            (function () {
                var handle = page.render({
                    elem: "#div5",
                    count: 500,
                    onPageJump: function (pre, to) {
                        layer.alert("将要从第 " + pre + " 页到第 " + to + " 页", { timeout: 1000 });
                    },
                    onPageLimitChanged: function (pre, to) {
                        layer.alert("每页条数将要从 " + pre + " 条改为 " + to + " 条", { timeout: 1000 });
                    }
                });

                $("#btn5").click(function () {
                    handle.jump(5);
                });
                $("#btn51").click(function () {
                    handle.modify(2, 1000);
                });
            })();
        });

    </script>

</body>
</html>